import React, { useState } from 'react';
import './ImageOverlay.css'; // 导入样式文件

// 定义类型
interface OverlayPageProps {
  mainContent: React.ReactNode;
  overlayContent: React.ReactNode;
}

const OverlayPage: React.FC<OverlayPageProps> = ({ mainContent, overlayContent }) => {
  // 定义一个状态变量来跟踪鼠标是否悬停在页面上  默认是false ，表示鼠标不在页面上
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      className="page-container"
      // 当鼠标悬停在页面上时，将isHovered设置为true
      onMouseEnter={() => setIsHovered(true)}
      // 当鼠标离开页面上时，将isHovered设置为false
      onMouseLeave={() => setIsHovered(false)}
    >
      <div className="main-content">{mainContent}</div>
      {isHovered && (
        <div className="overlay">
          {overlayContent}
        </div>
      )}
    </div>
  );
};

export default OverlayPage;